<template>
	<view>
		<!-- 懒加载动画 -->
		<view class="loading-box">
		  <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
		</view>
		<!-- <navbar name="健康豆"></navbar> -->
		<view class="healthbeans-bg" v-show="!loadingone">
			<u-navbar :background="background" back-icon-color="#FFFFFF">
			</u-navbar>
			<view style="position: relative;">
				<view class="numbean" @click="jumpBeansDetails()">
					<view class="beanStyle">
					</view>
					{{allBean}}
				</view>
				<view class="ruleView" @click="ruleTab">
					规则
				</view>
			</view>
			<!-- 新人任务 -->
			<view class="w702">
				<view class="newtask">
					新人任务
				</view>
				<block v-for="(item,idx) in newtaskList" :key="idx">
					<view class="task-view">
						<view class="task-Name">
							{{item.pointTitle}}
						</view>
						<view class="bean-number">
							<text class="bean-bgimage">+{{item.pointValue}}</text>
						</view>
						<view class="dotasks">
							<button class="dotasks-btn" type="default" @tap="task(item,idx,'new')">去做任务</button>
						</view>
					</view>
					<view class="line63" v-show="newtaskList.length-1 != idx">
					</view>
				</block>
			</view>
			<!-- 每日任务 -->
			<view class="w702">
				<view class="newtask">
					每日任务
				</view>
				<block v-for="(item,idx) in everydaylist" :key="idx">
					<view class="task-view" :class="isShow&&idx >1?'disNone':''">
						<view class="task-Name">
							{{item.pointTitle}}
						</view>
						<view class="bean-number">
							<text class="bean-bgimage">+{{item.pointValue}}</text>
						</view>
						<view class="dotasks">
							<button class="dotasks-btn" type="default" @tap="task(item,idx,'every')">去做任务</button>
						</view>
					</view>
					<view class="line63">
					</view>
				</block>
				<view class="see-task" @click="isShow =!isShow">
					<text class="see-icon" :class="!isShow?'trr180':''">查看更多任务</text>
				</view>
			</view>
			<!-- 健康豆当钱花 -->
			<view class="w702 suggest">
				<view class="causeTitle">
					健康豆当钱花
					<!-- <view class="moreTitle"> -->
						<navigator class="moreTitle" target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
							:path="PointGoodsList.moreUrl" extra-data="" version="release" hover-class="hoverbgfff">
						更多
						</navigator>
					<!-- </view> -->
				</view>
				<view class="weui-flex">
					<view class="dbox-wiew" :class="index == 0?'mardr20':''" v-for="(item,index) in PointGoodsList.goodsVOS" :key="index">
						<navigator target="miniProgram" open-type="navigate" app-id="wxeb719b5bc850729e"
							:path="item.detailUrl" extra-data="" version="release" hover-class="hoverbgfff">
						<view class="wiewImage">
							<u-lazy-load height="224" border-radius="10" img-mode="aspectFill" :image="item.goodsImageUrl"></u-lazy-load>
						</view>
						<view class="view-title text-line" style="height: 120upx;">
							{{item.title}}
						</view>
						<view style="padding:0 20upx;">
							<view class="commodity-price">
								¥{{item.salePrice}}
							</view>
							<!-- <view class="sales-volume">
								月销{{item.salesNum}}
							</view> -->
						</view>
						</navigator>
					</view>
					<!-- <view class="dbox-wiew">
						<view class="wiewImage">
							<u-lazy-load height="224" border-radius="10" img-mode="aspectFill" image=""></u-lazy-load>
						</view>
						<view class="view-title">
							每一口都是健康的复合固体蛋白饮料
						</view>
						<view style="padding:0 20upx;">
							<view class="commodity-price">
								¥378
							</view>
							<view class="sales-volume">
								月销2011
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"
import uNavbar from "@/uview-ui/components/u-navbar/u-navbar.vue"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

	export default {
		components: {
			uLoading,
			uNavbar,
			uLazyLoad,
		},
		data() {
			return {
				PointGoodsList:'',//健康豆当钱花
				loadingone:false,//懒加载动画
				allBean:0,
				isShow: true,
				background: {
					backgroundImage: 'linear-gradient(10deg, rgb(129, 192, 66,0), rgb(46, 167, 224,0))'
				},
				everydaylist: [],
				newtaskList: [],
			}
		},
		onLoad() {
			this.point();
			this.getPointGoodsList()//健康豆当钱花数据
		},
		onShow() {
			this.getUserPointTotal()
		},
		methods: {
            //跳转健康豆明细页面
            jumpBeansDetails(){
                console.info("健康豆跳转页面")
                uni.navigateTo({
                	url: '/pagesMy/my/healthBeans/details-list'
                })
            },
			// 健康豆当钱花
			getPointGoodsList(){
				let _this = this;
				this.$shopnew.get(global.apiUrls.getPointGoodsList, {}).then(res => {
					if(res.data.code == 1000){
						_this.PointGoodsList = res.data.result
					}
				})
			},
			// 获取用户总积分
			getUserPointTotal() {
				this.loadingone = true;
				let _this = this;
				this.$shopnew.get(global.apiUrls.getUserPointTotal + '?userId=' + uni.getStorageSync(global.IS_DEV?'USER_DATA_BSY_T':'USER_DATA_BSY_Z')
					.userId, {}).then(res => {
					if(res.data.code == 1000){
						_this.allBean = res.data.result
					}
					_this.loadingone = false;
				})
			},
			task(item, index, type) {
				console.log(item, index, type)
				item.taskStatus = 0 //默认未完成
				if (item.pointDict == 'HEALTH_ASK') { //健康评测
					uni.navigateTo({
						url: '/pages/subpackage/home/oneAccess/evaluating?task=' + item.taskStatus + '&stepId=' +
							item.pointDict + '&givePoint=' + item.pointValue+'&page='+'healthBeans'
					})
				} else if (item.pointDict == 'SHARE_CONTENT') { //分享内容
					uni.navigateTo({
						url: '/pages/subpackage/find/postAmessage/postAmessage?task=' + item.taskStatus +
							'&stepId=' + item.pointDict + '&givePoint=' + item.pointValue+'&page='+'healthBeans'
					})
				} else if (item.pointDict == 'PURCHASE_GOODS') { //去商城
					uni.switchTab({
						url: '/pages/tab/college'
					})
				} else if (item.pointDict == 'READ_ARTICLE') { //阅读文章
					uni.navigateTo({
						url: '/pages/subpackage/find/cyclopedia/cyclopedia?task=' + item.taskStatus + '&id=' + item
							.pointId + '&stepId=' + item.pointDict + '&givePoint=' + item.pointValue+'&page='+'healthBeans'
					})
				} else if (item.pointDict == 'COMMENT') { //去评论
					uni.reLaunch({
						url: '/pages/tab/find'
					})

					setTimeout(() => {
						// uni.$emit('indexTab', {
						// 	'page': 'find',
						// 	'task': item.taskStatus,
						// 	'stepId': item.pointId,
						// 	'givePoint': item.pointValue
						// })
						uni.$emit('findOnlaod', {
							'task': item.taskStatus,
							'stepId': item.pointDict,
							'givePoint': item.pointValue,
							'pointDict':item.pointDict,
							page:'healthBeans'
						})
					}, 500);
				}
				// else if(item.pointDict == 'KNOWLEDGE'){

				// }
			},
			// 获取健康豆接口
			point() {
				let _this = this;
				this.$shopnew.get(global.apiUrls.point, {}).then(res => {
					if (res.data.code == 1000) {
						let everydaylist = [],
							newtaskList = [],
							result = res.data.result; //接口返回所有数据
						for (let i = 0; i < result.length; i++) {
							if (result[i].pointType == 1) { //新手
								newtaskList.push(result[i])
							} else { //每日
								everydaylist.push(result[i])
							}
						}
						_this.newtaskList = newtaskList;
						_this.everydaylist = everydaylist;
					} else {

					}
				})
			},
			ruleTab() {
				uni.navigateTo({
					url: '/pagesMy/my/course/course'
				})
			}
		}
	}
</script>

<style lang="scss">
	.mardr20{
		margin-right: 20upx;
	}
	.w702 {
		width: 702upx;
		margin: 30upx auto 0;
		border-radius: 20upx;
	}

	.dbox-wiew {
		width: 321upx;
		height: 399upx;
		background: #F5F5F5;
		border-radius: 16upx;

		.wiewImage {
			width: 321upx;
			height: 224upx;
		}

		.view-title {
			font-size: 30upx;
			font-weight: 500;
			color: #333333;
			line-height: 42upx;
			padding: 12upx 22upx 19upx;
		}

		.commodity-price {
			font-size: 26upx;
			font-weight: 500;
			color: #F56767;
			line-height: 37upx;
			float: left;
		}

		.sales-volume {
			font-size: 24upx;
			font-weight: 400;
			color: #999999;
			line-height: 33upx;
			float: right;
		}
	}

	.causeTitle {
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		line-height: 50upx;
		position: relative;
		left: 30upx;
		padding-bottom: 20upx;
	}

	.causeTitle::before {
		content: '';
		width: 9upx;
		height: 25upx;
		position: absolute;
		top: 14upx;
		left: -30upx;
		background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
		border-radius: 5upx;
	}

	.moreTitle {
		float: right;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		position: relative;
		right: 80upx;
	}

	.moreTitle:before {
		content: '';
		position: absolute;
		top: 4upx;
		right: -40upx;
		width: 36upx;
		height: 36upx;
		background: url(https://bsyjk-pic.bsyjk.cn/arrows/1CB6DDEEB08E4CE0A40E8E86A99D1A0D.png)no-repeat;
		background-size: 36upx 36upx;
	}

	.suggest {
		padding: 23upx 27upx 30upx;
	}

	.see-task {
		height: 74upx;
		line-height: 74upx;
		text-align: center;
		font-size: 22upx;
		font-weight: 400;
		color: #9B9B9B;

		.see-icon,
		.trr180 {
			position: relative;
		}

		.see-icon:before {
			content: '';
			width: 25upx;
			height: 25upx;
			position: absolute;
			top: 4upx;
			left: -30upx;
			background: url(https://bsyjk-pic.bsyjk.cn/duigicon/338DE8F43F2B4023BE5AD2E074A206DA.png)no-repeat;
			background-size: 25upx 25upx;
		}

		.trr180:before {
			content: '';
			width: 25upx;
			height: 25upx;
			position: absolute;
			top: 4upx;
			left: -30upx;
			background: url(https://bsyjk-pic.bsyjk.cn/duigicon/338DE8F43F2B4023BE5AD2E074A206DA.png)no-repeat;
			background-size: 25upx 25upx;
			transform: rotate(180deg);
		}
	}

	.line63 {
		width: 663upx;
		height: 2upx;
		background: #F5F5F5;
		margin: 0 auto;
	}

	.task-view {
		height: 117upx;
		line-height: 117upx;
		padding: 0 20upx;
		display: flex;

		.task-Name {
			width: 320upx;
			height: 117upx;
			font-size: 30upx;
			font-weight: 400;
			color: #333333;
			line-height: 117upx;
		}

		.bean-number {
			width: 200upx;
			font-size: 34upx;
			font-weight: 500;
			color: #333333;

			.bean-bgimage {
				position: relative;

			}

			.bean-bgimage:before {
				content: '';
				width: 45upx;
				height: 36upx;
				position: absolute;
				right: -46upx;
				top: 2upx;
				// background: #000;
				background: url(https://bsyjk-pic.bsyjk.cn/beanredicon/1E5FA58BCEB64D0BB47788045DD3FAFE.png)no-repeat;
				background-size: 45upx 36upx;
			}
		}

		.dotasks {
			.dotasks-btn {
				width: 136upx;
				height: 46upx;
				margin: 38upx 0 0;
				background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
				border-radius: 42upx;
				font-size: 24upx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 46upx;
				padding: 0;

			}
		}
	}

	.newtask {
		width: 702upx;
		height: 90upx;
		background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
		opacity: 0.68;
		font-size: 30upx;
		font-weight: 500;
		color: #F5F5F5;
		line-height: 90upx;
		padding: 0 20upx;
		border-radius: 20upx 20upx 0 0;
	}

	.healthbeans-bg {
		width: 750upx;
		height: 1869upx;
		background: url('https://bsyjk-pic.bsyjk.cn/jkdbg/0BD02E70FE744F878ED0F56F14F8C489.png')no-repeat;
		background-size: 750upx 1869upx;
		padding-top: 40upx;
	}

	.numbean {
		width: 189upx;
		height: 189upx;
		background: linear-gradient(225deg, #FF8960 0%, #FF62A5 100%);
		border: 8upx solid #FFFFFF;
		border-radius: 50%;
		margin: 50upx auto 0;
		font-size: 36upx;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 50upx;

		.beanStyle {
			width: 62upx;
			height: 61upx;
			margin: 30upx auto 10upx;
			background: url(https://bsyjk-pic.bsyjk.cn/foodimage/9CC0DFDFCE8B41B2A4F244CAB7DDF434.png)no-repeat;
			background-size: 62upx 61upx;
		}
	}

	.ruleView {
		width: 136upx;
		height: 46upx;
		text-align: center;
		line-height: 46upx;
		color: #fff;
		position: absolute;
		top: 87upx;
		right: 0;
		background: linear-gradient(180deg, #FBA0A0 0%, #F56767 100%);
		border-radius: 42upx 0px 0px 42upx;
	}

	.disNone {
		display: none;
	}
</style>
